今日任務: 想要忽略The、A、An，再幫樂隊名稱做排序

樂隊名稱陣列:

const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];

排序樂隊

Day04有介紹過sort()
sort(): 會對一個陣列的所有元素進行排序，並回傳此陣列。

const sortBands = bands.sort(function (a, b) {
    if (a > b) {
        return 1;
    } else {
        return -1;
    }
});
console.log(sortBands);

想要忽略The 、A 、An ，再排序

String.prototype.replace(pattern, replacement): 會傳回一個新字串，此新字串是透過將原字串與 pattern 比對，以 replacement 取代吻合處而生成。
String.prototype.trim(): 會移除字串起始及結尾處的空白字元。 本文中的空白字元指所有空格字元（如：空格、欄標、無間斷空格等等）及換行字元。

RegExp 正規表達式(regular expressions)

RegExp 物件被用來比對符合自訂規則的文字。
/^(a |an |the )/為正規表達式
Day06有介紹過RegExp 正規表達式
找出The 、A 、An ，並用空白取代，再把空白字元移除

function strip(bandName) {
    return bandName.replace(/^(a |an |the )/i, '').trim();
}

測試一下

放入我們一開始排序的

const sortBands = bands.sort(function (a, b) {
    if (strip(a) > strip(b)) {
        return 1;
    } else {
        return -1;
    }
});
console.log(sortBands);

縮寫

const sortBands = bands.sort((a, b) => (strip(a) > strip(b) ? 1 : -1));
console.log(sortBands);

再加進html裡面

function strip(bandName) {
    return bandName.replace(/^(a |an |the )/i, '').trim();
}

const sortBands = bands.sort((a, b) => (strip(a) > strip(b) ? 1 : -1));
console.log(sortBands);

document.querySelector('.bands').innerHTML = 
    sortBands
        .map((band) => `<li>${band}</li>`)
        .join('');

畫面

今日學習到的:

• sort(): 會對一個陣列的所有元素進行排序，並回傳此陣列。
• String.prototype.replace(pattern, replacement): 會傳回一個新字串，此新字串是透過將原字串與 pattern 比對，以 replacement 取代吻合處而生成。
• String.prototype.trim(): 會移除字串起始及結尾處的空白字元。 本文中的空白字元指所有空格字元（如：空格、欄標、無間斷空格等等）及換行字元。
• RegExp 正規表達式(regular expressions)

效果連結:連結

參考連結:
MDN: replace(pattern, replacement)
MDN: trim()